<template>
  <view class="gx-page">
    <!-- 定位状态显示 -->
    <map
      v-if="latitude"
      id="map"
      class="map"
      :latitude="latitude"
      :longitude="longitude"
      style="width: 100%; height: 50vh"
      :markers="markers"
      :scale="scale"
    >
    </map>

    <!-- 人员卡片列表 -->
    <view class="person-list">
      <view
        class="person-card"
        v-for="(person, index) in personList"
        :key="index"
      >
        <view class="person-info">
          <view class="name-row">
            <text class="name">{{ person.name }}</text>
            <text class="position-tag">{{ person.position }}</text>
          </view>
          <text class="phone">
            <a :href="'tel:' + person.phone">{{ person.phone }}</a>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { MapUtil } from '../../utils/map'
import { mapGetters } from 'vuex'
export default {
  name: 'wx_pages_zzzc_index',
  data() {
    return {
      latitude: '',
      longitude: '',
      scale: 14,
      markers: [],
      isLocating: true,
      personList: [
        {
          name: '贾书记',
          phone: '13614878333',
          position: '蓝天街道书记',
        },
        {
          name: '侯书记',
          phone: '13451378019',
          position: '铁北社区书记',
        },
        {
          name: '社区民警',
          phone: '18004774660',
          position: '铁北社区书记',
        },
      ],
    }
  },

  computed: {
    ...mapGetters(['userInfo']),
  },
  mounted() {
    this.getLocation()
  },
  methods: {
    getLocation() {
      const _this = this
      const { gisObj } = _this.userInfo
      MapUtil.Geolocation().then((res) => {
        _this.latitude = res.lat || gisObj.lat
        _this.longitude = res.lng || gisObj.lng
        _this.markers = [
          {
            latitude: _this.latitude,
            longitude: _this.longitude,
            iconPath: require('@/static/image/shape.png'),
            width: 18,
            height: 20,
          },
        ]
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.gx-page {
  box-sizing: border-box;
  min-height: 100vh;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.location-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;

  .location-icon {
    width: 24px;
    height: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    &::before {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border: 2px solid #66c2ff;
      border-radius: 50%;
    }

    &::after {
      content: '';
      position: absolute;
      width: 6px;
      height: 6px;
      background-color: #66c2ff;
      border-radius: 50%;
    }
  }

  .status-text {
    font-size: 14px;
    color: #666;
  }
}

.blink {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.person-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
}

.person-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .person-info {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .name-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .name {
      font-size: 16px;
      font-weight: bold;
    }

    .position-tag {
      font-size: 12px;
      color: #66c2ff;
      background-color: rgba(0, 122, 255, 0.1);
      padding: 2px 8px;
      border-radius: 10px;
    }

    .phone {
      font-size: 14px;
      color: #66c2ff;

      a {
        color: inherit;
        text-decoration: none;
      }
    }
  }
}
</style>
  